<!-- 如果不需要监听变更数据，就在父组件直接使用v-model:field="" -->
<template>
    <div class="">
        <van-field 
            :model-value="field" 
            @update:model-value="emits('update:field', $event)"
            required
            center
            is-link
            :readonly="true"
            :name="name" 
            :label="label"
            :placeholder="label" 
            :rules="[{ required: true, message: '请选择' + label }]"
            @click="!readonly ? showPicker = true : ''"
        />
        <van-popup 
            v-model:show="showPicker" 
            position="bottom"
            close-on-popstate
            round
        >
            <van-date-picker
                v-model="currentDate"
                title="选择日期"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConfirm"
                @cancel="showPicker = false"
            />
        </van-popup>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw } from 'vue';
    import type { Ref, Raw } from 'vue'
    // withDefaults(defineProps<{
    //     field?: any,
    //     name?: string,
    //     label?: string,
    //     columns?: any[],
    // }>(), {
    //     field: '',
    //     name: '',
    //     label: '',
    //     columns: () =>[],
    // })
    
    const currentDate: Ref<string[]> = ref([])
    const { field, name, label, minDate, maxDate, readonly=false } = defineProps<{
        field?: any,
        name?: string,
        label?: string,
        minDate?: any,
        maxDate?: any,
        readonly?: boolean,
    }>()
    if (field && field.split('-').length == 3) {
        currentDate.value = [field.split('-')[0], field.split('-')[1], field.split('-')[2]]
    } else {
        const date = new Date()
        currentDate.value = [date.getFullYear().toString(), (date.getMonth()+1).toString(), (date.getDate().toString())]
    }
    console.log(currentDate)
    const emits = defineEmits<{
        (e: 'update:field', data: any): void,
    }>()
    const showPicker: Ref<boolean> = ref(false)
    
    const onConfirm = ({ selectedValues, selectedOptions }) => {
        emits('update:field', selectedValues[0] + '-' + selectedValues[1] + '-' + selectedValues[2])
        showPicker.value = false;
    }
</script>

<style lang="scss" scoped>
    
</style>